import React from 'react'
import { BaseListPage, columnRenders, http, UdModal, IBaseListPageState, IBaseListPageProps } from '@/lib'
import { Modal, message, Button, Upload } from 'antd'
import { downBlobFile } from '@/utils/methods'

const { confirm } = Modal

class List extends BaseListPage<IBaseListPageProps, IIsolationListState> {
  private modal
  constructor(props) {
    super(props)
    this.state = {
      title: '隔离管理',
      queryApi: '',
      rowKey: '',
      conditions: [
        { label: '箱码编号', id: 'code' },
        { label: '盒码编号', id: 'code2' },
      ],
      columns: [
        { title: '箱码编号', dataIndex: 'code' },
        { title: '瓶码编号', dataIndex: 'code2' },
        { title: '创建人', dataIndex: 'createUser' },
        { title: '创建时间', dataIndex: 'createTime' },
        {
          title: '操作', dataIndex: 'operate', render: columnRenders.operate([
            { title: '删除', action: (text, record) => this.deleteHandle(record) }
          ])
        },
      ],
      leftBtns: [
        <Button type='primary' onClick={this.importHandle}>导入</Button>,
        <Button>导出</Button>
      ],
      uploading: false,
    }
  }

  public importHandle = () => {
    this.modal = UdModal.open({
      width: 300,
      content: <>
        <div className='import-user-modal'>
          <Button type='primary' onClick={this.downloadTpl}>下载模板</Button>
          <Upload showUploadList={false} customRequest={this.importRequest}><Button type='primary'>导入员工</Button></Upload>
        </div>
      </>,
      footer: null,
      maskClosable: false,
      centered: true,
    })
  }

  public downloadTpl = () => {
    http.get('', { responseType: 'arraybuffer' }).then(res => {
      if (!res.data.code) {
        downBlobFile(res.data, '积分隔离管理导入模板')
      }
    })
  }

  public importRequest = (option) => {
    this.modal && this.modal.destroy()
    this.setState({ uploading: true })
    const { file } = option
    const formData = new FormData()
    formData.append('file', file)
    http.post('', formData).then(res => {
      message.success('导入成功')
      this.query()
    }).finally(() => this.setState({ uploading: false }))
  }

  public deleteHandle = (row) => {
    confirm({
      title: '您确定要删除该条数据吗？',
      onOk: () => {
        return http.delete('').then(res => {
          message.success('删除成功')
          this.query()
        })
      }
    })
  }

}

export default List

interface IIsolationListState extends IBaseListPageState {
  uploading: boolean
}
